<template>
  <div>
    <div class="circle"></div>
    <div class="half-circle"></div>
    <div class="fou"></div>
    <div data-title="hello wold" class="title-data"></div>
    <div class="chrome"></div>
  </div>
</template>

<script>
export default {
  name: "CssBorder"
};
</script>

<style scoped>
.circle {
  width: 100px;
  height: 50px;
  background: red;
  border-radius: 50px/25px;
}
.half-circle {
  width: 100px;
  height: 50px;
  background: red;
  border-radius: 50px 50px 0 0;
}
.fou {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #333;
  position: relative;
}
.fou:after {
  content: "";
  display: block;
  width: 8px;
  height: 60px;
  border-radius: 5px;
  background: #333;
  position: absolute;
  right: -22px;
  top: 38px;
  transform: rotate(-45deg);
}
div.chrome {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  box-shadow: 0 0 4px #999, 0 0 2px #ddd inset;
  background: radial-gradient(circle, #4facf5 0, #2196f3 28%, transparent 28%),
    radial-gradient(circle, #fff 33%, transparent 33%),
    linear-gradient(-50deg, #ffeb3b 34%, transparent 34%),
    linear-gradient(60deg, #4caf50 33%, transparent 33%),
    linear-gradient(180deg, #ff756b 0, #f44336 30%, transparent 30%),
    linear-gradient(-120deg, #ffeb3b 40%, transparent 40%),
    linear-gradient(-60deg, #ffeb3b 30%, transparent 30%),
    linear-gradient(0deg, #4caf50 45%, transparent 45%),
    linear-gradient(60deg, #4caf50 30%, transparent 30%),
    linear-gradient(120deg, #f44336 50%, transparent 50%),
    linear-gradient(180deg, #f44336 30%, transparent 30%);
}
</style>
